<!DOCTYPE html>
<html lang="en"  ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="../css/bootstrap.css">
    <style type="text/css">
        body {
            padding: 30px 0;
            background-color: #f5f5f5;
        }
        .container{
            width:460px;
            padding:10px 30px;
            background-color:white;
            border-radius:5px;
            border: 1px solid #e5e5e5;
            box-shadow: 5px 5px 25px #ccc;
        }
        .taskList{
            padding:0;
            margin-top:20px;
        }
        .taskList li{
            list-style:none;
            border-bottom:1px solid #ddd;
        }
        .done-true{
            text-decoration:line-through;
        }
        .close{
            margin-left:10px;
        }
    </style>
    <script src="../js/1.4.8/angular.js"></script>
</head>
<body>
<div class="container" >
    <div ng-controller="myCtrl">
        <h3>我的任务列表</h3>
        <form ng-submit="addTask()">
            <input type="text"
                   class="form-control"
                   ng-model="taskText"
                   size="30"
                   placeholder="添加新任务"
                   ng-required="true" />
            <div class="checkbox" ng-show="hasTask()">
                <label>
                    <input type="checkbox"
                           ng-init="isAllDone=false"
                           ng-model="blnAllchk"
                           ng-click="chkAll()"> 标记所有为已解决
                </label>
            </div>
        </form>

        <div class="btn-toolbar" ng-show="hasTask()">
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default"
                        ng-click="ordKey='text'; reverse=!reverse">
                    内容</button>
                <button type="button" class="btn btn-default"
                        ng-click="ordKey='time'; reverse=!reverse">
                    时间
                </button>
            </div>
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default"
                        ng-click="done=false">
                    未完成
                </button>
                <button type="button" class="btn btn-default"
                        ng-click="done=true">
                    已完成
                </button>
                <button type="button" class="btn btn-default"
                        ng-click="done=''">
                    全部
                </button>
            </div>
        </div>
        <ul class="taskList">
            <li ng-repeat="task in taskList | filter:done | orderBy:ordKey:reverse">
                <div class="checkbox">
                    <label>
                        <input type="checkbox"
                               ng-model="task.done"
                               ng-click="save()">
                        <span class="done-{{task.done}}">{{task.text}}</span>
                    </label>
                    <button type="button"
                            class="close"
                            ng-click="removeTask(task)">×</button>
                    <span class="pull-right">{{task.time}}</span>
                </div>
            </li>
        </ul>
        <div class="count">
            未完成：<span class="badge">{{count().cw}}</span>，
            已完成：<span class="badge">{{count().cy}}</span>，
            总数：<span class="badge">{{count().cz}}</span>
        </div>
    </div>
</div>
    <script tyte="text/javascript">
        var app = angular.module("app", []);
            app.controller("myCtrl",["$scope","dateFilter",function ($scope,dateFilter) {
                var tmp = localStorage.getItem('taskList');
                $scope.taskList = tmp ? angular.fromJson(tmp) : [];

                //统计未完成和已完成及总数
                $scope.count = function () {
                    var cw = cy = 0, cz = $scope.taskList;
                    angular.forEach(cz, function (task) {
                        task.done ? cy++ : cw++;
                    });
                    return {'cw': cw, 'cy': cy, 'cz': cz.length};
                };

                //标记全部完成
                $scope.chkAll = function () {
                    angular.forEach($scope.taskList, function (task) {
                        task.done = $scope.blnAllchk ? false : true;
                    });
                    $scope.save();
                }

                $scope.hasTask = function () {
                    return $scope.taskList.length > 0;
                }

                //新增
                $scope.addTask = function () {
                    $scope.taskList.push({

                        id: $scope.taskList.length + 1,
                        text: $scope.taskText,
                        done: false,
                        time: getNowTime()

                    });
                    $scope.taskText = '';
                    $scope.save();
                };

                //删除
                $scope.removeTask = function (todo) {
                    $scope.taskList.splice($scope.taskList.indexOf(todo), 1);
                    $scope.save();
                };

                //保存
                $scope.save = function () {
                    //序列化的时候使用angular.toJson，因为ng-repeat会在对象内部添加$$hashkey属性，使用JSON.stringify序列化不会过滤
                    localStorage.setItem('taskList', angular.toJson($scope.taskList));
                }

                function getNowTime() {
                    return dateFilter(new Date(), 'yyyy-MM-dd HH:mm:ss');
                }
        }]);
    </script>
</body>
</html>